<template>
	<view class="main_box">
		<view class="fix_title">
			信息修改
		</view>
		<view class="txt">
			请修改身份信息
		</view>
		<view class="form_box">
			<view class="inp">
				<view class="left">
					姓名
				</view>
				<view class="right">
					<input type="text" v-model.trim="userInfo.userName" maxlength="15">
				</view>
			</view>
			<view class="inp">
				<view class="left">
					签发机关
				</view>
				<view class="right">
					<input type="text" v-model.trim="userInfo.office" maxlength="15">
				</view>
			</view>
			<view class="inp">
				<view class="left">
					证件类型
				</view>
				<view class="right">
					{{userInfo.type}}
				</view>
			</view>
			<view class="inp">
				<view class="left">
					身份证号
				</view>
				<view class="right">
					<input type="text" v-model.trim="userInfo.idNo" maxlength="18">
				</view>
			</view>
			<view class="inp">
				<view class="left">
					证件有效期
				</view>
				<view class="right">
					<input type="text" v-model.trim="userInfo.validDate">
				</view>
			</view>
			<view class="inp">
				<view class="left">
					性别
				</view>
				<view class="right">
					<input type="text" v-model.trim="reaSex" maxlength="1">
				</view>
			</view>
			<view class="inp">
				<view class="left">
					国籍
				</view>
				<view class="right">
					{{userInfo.nationality}}
				</view>
			</view>
			<view class="inpCard">
				<view class="left">
					身份证地址
				</view>
				<view class="right_s">
					<textarea v-model.trim="userInfo.address" auto-height maxlength="50" />
				</view>
			</view>
		</view>
		<view class="boxBt">
			<view class="btnLeft" @click="callBack">
				上一步
			</view>
			<view class="btn" @click="toGetFace">
				完成
			</view>
		</view>
		<view class="kdn">
			<image src="/static/images/blank/4341yu.png" mode=""></image>
			<view class="subx">
				交通银行 提供产品服务
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getPhoneCode,
		getTwoUserList,
		putIdentity,
		personFace,
		getProvinceList,
		getCityList,
		getWorkList,
		getMainWorkList
	} from '../../common/api/blank.js';
	import {
		_showLoading,
		_showToast
	} from '../../common/js/util.js'
	import {
		period
	} from "../../common/js/period.js"
	export default {
		data() {
			return {
				userInfo: {
					userName: "", //姓名
					type: "居民身份证",
					idNo: "", //身份证号
					validDate: "", //有效期
					genderTpCode: "", //性别
					nationality: "中国",
					address: "", //地址
					office: "", //机关
				},
				office: "", //机关
				indicatorStyle: `height: 50px;`,
				frontImage: "", //国徽面
				backImage: "", //人脸面
				reaSex: "",
				upLoad: true, //是否调用上传接口
			}
		},
		onLoad(option) {
			// this.office = option.office
			this.userInfo.office = uni.getStorageSync('office')
			this.userInfo.userName = uni.getStorageSync("userName") //姓名
			this.userInfo.idNo = uni.getStorageSync("idNo") //身份证
			this.userInfo.validDate = uni.getStorageSync("validDate") //身份证有效期
			this.userInfo.address = uni.getStorageSync("liveAddress") //身份证地址
			this.userInfo.genderTpCode = uni.getStorageSync("sex")
			this.userInfo.genderTpCode='1'
			if (this.userInfo.genderTpCode == '1') {
				this.reaSex = '男' //性别
			} else if (this.userInfo.genderTpCode == '2') {
				this.reaSex = '女'
			}
			console.log(option.frontImage)
			this.backImage = JSON.parse(decodeURIComponent(option.backImage)); //人脸面
			this.frontImage = JSON.parse(decodeURIComponent(option.frontImage)); //国徽面
		},
		onBackPress(options) {
			if (options.from === 'navigateBack') {
				return false
			}
			this.back();
			return true
		},
		components: {

		},
		methods: {
			callBack() {
				if (!this.upLoad) {
					console.log("上传中，请勿中断!")
				} else {
					uni.navigateBack()
				}
			},
			back() {
				if (!this.upLoad) {
					console.log("上传中，请勿中断!")
				} else {
					var pages = getCurrentPages();
					uni.navigateBack()
				}
			},
			//完成
			async toGetFace() {
				if(!this.upLoad){
					return
				}
				let sign=[]
				let arrId = Object.keys(this.userInfo).forEach(item=>{
					if(this.userInfo[item]){
						
					}else{
						sign.push(item)
					}
				})
				// console.log(sign)
				if (sign.length==0) {
					let reg = /^([1-9][0-9]{3})\.((1[0-2])||(0[1-9]))\.((0[1-9])||([1-2][0-9])||(3[0-1]))-([1-9][0-9]{3})\.((1[0-2])||(0[1-9]))\.((0[1-9])||([1-2][0-9])||(3[0-1]))$/
					// console.log(this.userInfo.validDate)
					// console.log(reg.test(this.userInfo.validDate))
					if(reg.test(this.userInfo.validDate)){
						var timePut = period(this.userInfo.validDate)
					}else{
						uni.showModal({
							title: '有效期格式为',
							content: '例：2000.01.01-2022.07.15',
							showCancel:false,
							success:(res=>{
								if (res.confirm) {
									this.userInfo.validDate=""
									console.log('用户点击确定');
								}
							})
						});
						return
					}
					if (timePut) {
						this.upLoad = false
						uni.showLoading({
							title: '上传中，请稍候'
						})
						var h_userId = uni.getStorageSync("s_userId")
						if (this.reaSex == '女') {
							this.userInfo.genderTpCode = '2'
						} else if (this.reaSex == '男') {
							this.userInfo.genderTpCode = '1'
						} else {
							_showToast("性别只能是男或女")
							return
						}
						var timeCard = this.userInfo.validDate
						timeCard = timeCard.substr(timeCard.indexOf('-') + 1, 10)
						timeCard = timeCard.replace(/[.]/g, '')
						const res = await putIdentity({
							"userId": h_userId,
							"genderTpCode": this.userInfo.genderTpCode,
							"validDate": timeCard,
							"office": this.userInfo.office,
							"userName": this.userInfo.userName,
							"idNo": this.userInfo.idNo,
							"cardNo": "",
							"address": this.userInfo.address,
							"backImage": this.backImage,
							"frontImage": this.frontImage,
							"orgId": uni.getStorageSync("orgId")
						})
						if (res.code == 0) {
							uni.hideLoading()
							uni.setStorageSync('sex', this.reaSex);
							uni.setStorageSync('imageOrderNo', res.data);
							uni.setStorageSync('idNo', this.userInfo.idNo)
							uni.setStorageSync('userName', this.userInfo.userName)
							uni.setStorageSync('validDate',this.userInfo.validDate)
							this.upLoad = true
							uni.navigateTo({
								url: `/pageBlank/collectionH5/collectionH5`
							})
						} else {
							uni.hideLoading()
							// console.log(this.frontImage)
							uni.showModal({
								title: '提示',
								content: res.msg,
								showCancel: false,
								success: function(res) {
									// uni.navigateBack()
								}
							});
							this.upLoad=true
						}
						// console.log(res)
					} else {
						uni.showToast({
							icon: "none",
							title: "身份证已过期"
						})
						return
					}

				} else {
					if (!this.userInfo.userName) {
						_showToast("请填写身份证姓名")
						return
					} else if (!this.userInfo.office) {
						_showToast("请填写身份证签发机关")
						return
					} else if (!this.userInfo.idNo) {
						_showToast("请填写身份证号")
						return
					} else if (!this.userInfo.validDate) {
						_showToast("请填写身份证有效期限")
						return
					} else if (!this.userInfo.genderTpCode) {
						_showToast("请填写身份证性别")
						return
					} else if (!this.userInfo.address) {
						_showToast("请填写身份证地址")
						return
					} else {

					}
				}

			}
		}
	}
</script>

<style lang="scss" scoped>
	.main_box {
		.kdn {
			margin: 86rpx 0rpx;
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;

			>image {
				width: 34rpx;
				height: 33rpx;
			}

			.subx {
				margin-left: 8rpx;
				height: 34rpx;
				font-size: 23rpx;
				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
				font-weight: 400;
				color: #003A79;
				line-height: 34rpx;
			}
		}

		box-sizing: border-box;
		overflow-y: auto;

		::v-deep .picker-view {
			width: 100%;
			height: 500rpx;
			box-sizing: border-box;
			padding-top: 40rpx;

			picker-view-column {
				margin: 0 10rpx;
			}
		}

		.item {
			height: 50px;
			line-height: 50rpx;
			font-size: 20rpx;
			align-items: center;
			justify-content: center;
			text-align: center;
		}

		.popup-content {
			height: 720rpx;
			background-color: #fff;
			position: fixed;
			bottom: 0rpx;
			left: 0rpx;
			width: 100%;
			margin: 0rpx;

			.nbs {
				width: 100%;
				height: 120rpx;
			}

			.busp {
				display: flex;
				justify-content: space-between;

				.bLeft {
					width: 100rpx;
					height: 80rpx;
					line-height: 80rpx;
					text-align: center;
				}

				.bRight {
					width: 100rpx;
					height: 80rpx;
					line-height: 80rpx;
					text-align: center;
				}
			}
		}

		.popup-height {
			height: 100%;
			flex: 1;
			width: 200px;
			background-color: green;
		}

		.form_box {
			display: flex;
			flex-direction: column;
			align-items: center;

			.inpCard {
				width: 650rpx;
				height: auto;
				background: #FFFFFF;
				border-radius: 8rpx;
				opacity: 1;
				border: 2rpx solid #E6E6E6;
				display: flex;
				margin-bottom: 68rpx;
				flex-wrap: nowrap;

				.left {
					margin-left: 21rpx;
					width: 170rpx;
					height: 87rpx;
					line-height: 87rpx;
					font-size: 28rpx;
					font-family: Source Han Sans CN-Medium, Source Han Sans CN;
					font-weight: 500;
					color: #6E7077;
					text-align-last: justify
				}

				.right_s {

					box-sizing: border-box;
					padding-top: 25rpx;
					width: 430rpx;
					height: auto;
					line-height: 40rpx;
					margin-left: 23rpx;
					margin-bottom: 25rpx;

					textarea {
						width: 100%;
						font-size: 28rpx;
						font-family: Source Han Sans CN-Regular, Source Han Sans CN;
						font-weight: 400;
					}
				}
			}

			.inp {
				width: 650rpx;
				height: 87rpx;
				background: #FFFFFF;
				border-radius: 8rpx;
				opacity: 1;
				border: 2rpx solid #E6E6E6;
				display: flex;
				margin-bottom: 19rpx;

				input {
					width: 650rpx;
					height: 87rpx;
					box-sizing: border-box;
					padding-left: 21rpx;
					font-size: 28rpx;
				}

				.left {
					margin-left: 21rpx;
					width: 169rpx;
					height: 87rpx;
					line-height: 87rpx;
					font-size: 28rpx;
					font-family: Source Han Sans CN-Medium, Source Han Sans CN;
					font-weight: 500;
					color: #6E7077;
					text-align-last: justify
				}

				.right_s {
					display: flex;
					width: 430rpx;
					justify-content: space-between;
					align-items: center;
					margin-left: 23rpx;

				}

				.right {
					flex: 1;
					height: 87rpx;
					line-height: 87rpx;
					margin-left: 23rpx;
					font-size: 28rpx;
					font-family: Source Han Sans CN-Regular, Source Han Sans CN;
					font-weight: 400;
					color: #333333;

					>input {
						width: 100%;
						height: 87rpx;
						padding: 0;
					}

				}
			}

			.inp:last-child {
				margin-bottom: 68rpx;
			}
		}

		.boxBt {
			display: flex;
			justify-content: center;

			.btn {
				width: 358rpx;
				height: 88rpx;
				line-height: 88rpx;
				text-align: center;
				background: #3478F5;
				box-shadow: 0rpx 3rpx 26rpx 1rpx rgba(55, 98, 244, 0.58);
				border-radius: 44rpx 44rpx 44rpx 44rpx;
				opacity: 1;
				font-size: 32rpx;
				font-family: Source Han Sans CN-Light, Source Han Sans CN;
				font-weight: 300;
				color: #FFFFFF;
			}

			.btnLeft {
				width: 314rpx;
				height: 88rpx;
				line-height: 88rpx;
				text-align: center;
				background: #FFFFFF;
				box-shadow: 0rpx 3rpx 26rpx 1rpx rgba(0, 0, 0, 0.1);
				border-radius: 44rpx 44rpx 44rpx 44rpx;
				opacity: 1;
				border: 1rpx solid #666666;
				font-size: 32rpx;
				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
				font-weight: 400;
				color: #333333;
				margin-right: 22rpx;
			}
		}


		.fix_title {
			margin: 30upx 0 60upx 0;
			font-size: 40upx;
			font-weight: bolder;
			display: flex;
			align-items: center;
			margin-left: 10rpx;

			&::before {
				content: '';
				height: 36upx;
				width: 12upx;
				background-image: linear-gradient(to bottom, #c3defc, #007AFF);
				margin-right: 12upx;
				border-radius: 6upx;
			}
		}

		.txt {
			height: 46rpx;
			font-size: 32rpx;
			font-family: Source Han Sans CN-Medium, Source Han Sans CN;
			font-weight: 500;
			color: #020202;
			line-height: 46rpx;
			margin-bottom: 68rpx;
			margin-left: 32rpx;
			margin-top: 56rpx;
		}
	}
</style>
